<!doctype html>
<html>
	<head>
	<style>
	.layer {
		background-color: red;
		width: 500px;
		margin: 20px;
		padding: 30px;
		float: left;
	}
	.item {
		background-color: blue;
		margin: 20px 0;
		color: #fff;
		text-align: center;
		line-height: 30px;
	}
	</style>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script>
	$(function() {		
		// 1.jQuery 选择器
		$('#item1, #item3, #item2').css('background-color', 'grey');

		// 2.jQuery 事件
		$('#item1, #item3, #item2').on('click', function() {
			alert($(this).text());
		});

		// 3.jQuery 动画
		$('.item').animate({
			'line-height': '60px',
			'font-size':   '50px'
		});
	});
	</script>
	</head>
	<body>
		<div id="container">
			<div class="layer layer1">
				<div id="item1" class="item item1">1</div>
				<div id="item2" class="item item2">2</div>
				<div id="item3" class="item item3">3</div>
			</div>
			<div class="layer layer2">
				<div class="item item1">1</div>
				<div class="item item2">2</div>
				<div class="item item3">3</div>
				<div class="item item3">4</div>
			</div>
		</div>
	</body>
</html>